import React, { Component } from "react";
import { Button, Modal ,Form,Radio,Input} from "antd";
import axios from "axios";
const FormItem = Form.Item;
const RadioGroup = Radio.Group;


export default class StudentsAdd extends Component {
    formRef = React.createRef();
    constructor() {
        super();
        this.state = {
            visible: false
        };
    }
    openAdd = () => {
        this.setState({
            visible: true
        });
    };
    handleOk = () => {
        let {getFieldsValue} = this.formRef.current;
        // console.log(getFieldsValue());
        axios({
            method:"post",
            url:"/students",
            data: getFieldsValue()
        }).then(() => {
            this.props.show();
            this.setState({
                visible: false
            });
        });
       

    };
    handleCancel = () => {
        this.setState({
            visible: false
        });
    };
    render() {
        // const { getFieldDecorator } = this.formRef.current;
        const layout = {
            labelCol: {
              span: 4,
            },
            wrapperCol: {
              span: 16,
            },
          };
          const tailLayout = {
            wrapperCol: {
              offset: 8,
              span: 16,
            },
          };
        return (
            <div>
                <Button type="primary" onClick={this.openAdd}>
                    增加
                </Button>
                <Modal
                    title="增加学生"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <Form {...layout} ref={this.formRef}>
                        <FormItem label="姓名" name="name">
                            <Input />
                        </FormItem>
                        <FormItem label="年龄" name="age">
                            <Input />
                        </FormItem>
                        <FormItem  label="性别" name="gender">
                            
                                <RadioGroup>
                                    <Radio value="男">男</Radio>
                                    <Radio value="女">女</Radio>
                                </RadioGroup>
                            
                        </FormItem>

                    </Form>
                </Modal>
            </div>
        );
    }
}
// export default Form.create()(StudentsAdd);
